<html>
<body>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<div id="app"></div>
<script>
//准备表头数据
var myHeard=["用户ID","用户名","性别","年龄","等级"];
//------------------------------------------------------------------------------------
//准备表体数据
var myBody=[
["1","张三","男","19","10"],
["1","李四","女","20","11"],
["1","王五","男","21","13"],
["1","孙六","女","23","101"],
["1","周七","男","19","103"],
];
//------------------------------------------------------------------------------------
//创建表格组件
var Excel=React.createClass({
displayName:"Excel", //给组件声明一个displayName:”hisName”属性，来告诉React，这个被赋值的变量名是什么
//验证传入的数据类型
propTypes:{
myHeard1:React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
myBody1:React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.string)).isRequired,
},
render:function(){
return React.DOM.table(null,
React.DOM.thead(null,
React.DOM.tr(null,
this.props.myHeard1.map(function(title,idx){
return React.DOM.th({key:idx,},title); //key:idx 把每个元素的索引值提供给每个子节点元素作为key值
})
)
)
//-----------------------------------------------------------------
,React.DOM.tbody(null,
this.props.myBody1.map(function(row,idx){
return(
React.DOM.tr({key:idx,},
row.map(function(col,idx){
return (
React.DOM.td({key:idx,},col)
);
})
)
); 
})
)
//--------------------------------------------------------------------

)
},
});
//使用自定义组件，开始渲染
ReactDOM.render(
React.createElement(Excel,{
myHeard1:myHeard,
myBody1:myBody,
}),
document.getElementById("app")
);
</script>
</body>
</html>
